<template>
  <div>
      <el-form :model="teacherMap" :rules="rules" ref="teacherMap" label-width="80px" class="demo-ruleForm">
        <el-form-item label="讲师姓名" prop="name" >
          <el-input v-model="teacherMap.name" ></el-input>
        </el-form-item>
        <el-form-item label="讲师头衔" prop="level">
          <el-select v-model="teacherMap.level" >
            <el-option label="高级讲师" :value="1"></el-option>
            <el-option label="首席讲师" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="teacherMap.sort" :min="1" :max="10" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="讲师资历" prop="career" >
          <el-input v-model="teacherMap.career" ></el-input>
        </el-form-item>

        <el-form-item label="头像"   prop="avatar" >
            <el-upload
              :action="urlImg()"
              list-type="picture-card"
              :on-success="successfulSinger"
              :before-upload="beforeUploadSinger"
              :limit="1"
              :multiple="false"
              :on-exceed="onlimit"
              >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="teacherMap.avatar" alt="">
            </el-dialog>
        </el-form-item>
        <el-form-item label="老师简介" prop="intro">
          <el-input type="textarea" v-model="teacherMap.intro" :rows="8"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('teacherMap')">{{isNac?"创建":"修改"}}</el-button>
          <el-button @click="resetForm('teacherMap')">重置</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
  import {addteacher,modifyEduTeacher} from '@/api/teacher/teacher.js'
  export default {
    data(){
      return{
          teacherMap:{
              name:"",//讲师姓名
              level:1,//讲师头衔
              career:"",//讲师资历
              intro:"",//intro
              sort:1,
              avatar:"",

          },
          dialogVisible:false,
          isNac:true,
          rules: {
                    name: [
                      { required: true, message: '请输入姓名', trigger: 'blur' },
                    ],
                    career: [
                      {required: true, message: '请输入讲师资历', trigger: 'blur'}
                    ],
                    intro: [
                      { required: true, message: '请填写老师简介', trigger: 'blur' }
                    ],
                    avatar: [
                      { required: true, message: '请填写老师简介', trigger: 'blur' }
                    ]
                  }
             }

    },
    created() {

       if(this.$route.query.id==undefined){
         this.teacherMap={
              name:"",//讲师姓名
              level:1,//讲师头衔
              career:"",//讲师资历
              intro:"",//intro
              sort:1,
              avatar:"",
          }
          this.isNac=true
       }else{
         this.teacherMap=this.$route.query
         this.isNac=false
       }
    },
    methods:{
      /* 添加和修改 */
        submitForm(formName) {
          console.log(formName)
           this.$refs[formName].validate((valid) => {
             if (valid) {
               if(this.isNac){

                 addteacher(this.teacherMap).then(res=>{
                   this.$message({
                      message: '恭喜你，这是一条添加成功消息',
                      type: 'success'
                    });
                    this.$router.push("/teacher/table")
                 })
               }else{
                  modifyEduTeacher(this.teacherMap).then(res=>{
                      this.$message({
                         message: '恭喜你，这是一条修改成功消息',
                         type: 'success'
                       });
                       this.$router.push("/teacher/table")
                  })
               }

             } else {
               console.log('error submit!!');
               return false;
             }
           });
         },
         /* 上传图片之前判断  */
         beforeUploadSinger(file){

         	const isJpg = (file.type === 'image/jpeg')||(file.type === 'image/png');
         	if(!isJpg){
         		this.$message.error('上传图片只能是jpg和png')
         		return false;
         	}
         	const islt2M = (file.size/1024/1024)<2
         	if(!islt2M){
         		this.$message.error('上传图片不能超过2M')
         		return false;
         	}
         	return true;
         },
         /* 清空 */
        resetForm(){
            this.teacherMap={
                name:"",//讲师姓名
                level:1,//讲师头衔
                career:"",//讲师资历
                intro:"",//intro
                sort:1,
                avatar:"",
            }

        },
        /* 图片地址*/
        urlImg(){
            return process.env.BASE_API+"/eduoss/up"
        },
        /* 图片上传成功 */
        successfulSinger(response, file, fileList){
          this.$notify({
                 title: '成功',
                 message: '图片上传成功',
                 type: 'success'
            });
            this.teacherMap.avatar = response.data.url


        },
        onlimit(files){
          this.$message.error("只可以上传一张图片")
        }
    }
  }
</script>

<style scoped>
  .demo-ruleForm{
    width: 900px;
    margin:30px auto;
  }
</style>
